import { useState } from "react";
import { View } from "@tarojs/components";

import ByRow from "@/components/ui/ByRow";
import ByText from "@/components/ui/ByText";
import ByIcon from "@/components/ui/ByIcon";
import ByButton from "@/components/ui/ByButton";
import PopupContainer from "@/components/app/PopupContainer";

import useList from "@/hooks/useList";
import ApiCrm from "@/api/crm";

type RepairBill = {
  /**
   * 审核时间
   */
  auditDate: string;
  /**
   * 审核人
   */
  auditUserName: string;
  /**
   * 维修单编号
   */
  billNo: string;
  /**
   * 完成日期
   */
  completedDate: string;
  /**
   * 承包金额
   */
  contractAmount: number;
  /**
   * 创建日期
   */
  createDate: string;
  /**
   * 创建人名称
   */
  createUserName: string;
  /**
   * 客户名称
   */
  customerName: string;
  /**
   * 客户编号
   */
  customerNo: string;
  /**
   * 修改日期
   */
  editDate: string;
  /**
   * 修改人名称
   */
  editUserName: string;
  /**
   * 客户反馈内容
   */
  feedbackContent: string;
  /**
   * 负责人Id
   */
  headerId: number;
  /**
   * 负责人姓名
   */
  headerName: string;
  /**
   * 客户ID
   */
  intentCustomerId: number;
  /**
   * 是否已完成维修
   */
  isCompleted: boolean;
  /**
   * 组织名称
   */
  orgName: string;
  /**
   * 维修单Id
   */
  repairBillId: number;
  /**
   * 报修内容
   */
  repairContent: string;
  /**
   * 单据状态 0 已保存 1已提交 2已审核
   */
  status: number;
  /**
   * 合计金额
   */
  totalAmount: number;
};

export default ({
  intentCustomerId,
  repairBillId,
  onCancel,
  onConfirm,
}: {
  intentCustomerId: number;
  repairBillId: number;
  onCancel: () => void;
  onConfirm: (bill: RepairBill) => void;
}) => {
  const [selected, setSelected] = useState<RepairBill | null>(null);

  const { list } = useList<RepairBill>(ApiCrm.repairBills, {
    defaultParams: [{ intentCustomerId }],
  });

  const sId = selected?.repairBillId || repairBillId;

  return (
    <PopupContainer title="选择售后维修单" onCancel={onCancel}>
      <View className="max-h-70vh overflow-auto">
        {list.map((item) => (
          <View
            key={item.billNo}
            className={`flex items-center p-3 m-3 border-1 shadow-black-1 rounded-lg ${
              item.billNo === selected?.billNo
                ? "bg-primary-light border-primary border-primary"
                : "bg-white border-white"
            }`}
            onClick={() => setSelected(item)}
          >
            <ByIcon
              name={item.repairBillId === sId ? "CheckFill" : "UnChecked"}
              className={
                item.repairBillId === sId ? "text-primary" : "text-third"
              }
            />

            <View className="flex-auto ml-3">
              <View>{item.billNo}</View>
              <ByText size="sm" type="third">
                报修内容：{item.repairContent}
              </ByText>

              <ByRow content="between" className="mt-2">
                <ByText size="sm" type="third">
                  维修负责人：{item.headerName}
                </ByText>

                <ByText size="sm" type="third">
                  合计承包金额：¥{item.contractAmount}
                </ByText>
              </ByRow>
            </View>
          </View>
        ))}
      </View>

      <ByButton
        className="w-2/3 my-3"
        size="large"
        disabled={!selected}
        onClick={() => onConfirm(selected!)}
      >
        保存
      </ByButton>
      <View className="safe-footer" />
    </PopupContainer>
  );
};
